<template>
  <q-item clickable tag="a" :to="'/' + link">
    <!-- target="_blank" -->
    <q-item-section v-if="icon" avatar>
      <q-icon :name="icon" />
    </q-item-section>

    <q-item-section>
      <q-item-label>{{ title }}</q-item-label>
    </q-item-section>
    <q-item-section top side>
      <div class="text-grey-8 q-gutter-xs">
        <q-btn size="12px" flat dense round icon="more_vert" @click.prevent />
        <q-menu>
          <q-list style="min-width: 150px">
            <q-item
              clickable
              v-close-popup
              @click="useMsgStores().deleteMsg(link)"
            >
              <q-item-section side>
                <q-icon name="delete" />
              </q-item-section>
              <q-item-section>删除消息 </q-item-section>
            </q-item>
            <q-item
              clickable
              v-close-popup
              @click="useMsgStores().copyMsg(link)"
            >
              <q-item-section side>
                <q-icon name="content_copy" />
              </q-item-section>
              <q-item-section>复制数据 </q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </div>
    </q-item-section>
  </q-item>
</template>

<script setup lang="ts">
import { useMsgStores } from 'src/stores/msgStores';
defineOptions({
  name: 'EssentialLink'
});
export interface EssentialLinkProps {
  title: string;
  caption?: string;
  link?: number;
  icon?: string;
}

withDefaults(defineProps<EssentialLinkProps>(), {
  caption: '',
  link: 1,
  icon: ''
});
</script>
